<template>
<div>
  <el-row class="footer">
    <el-col @click.native="footerChange(index)" :span="6" v-for="(item,index) in footer" :key="index" class="item">
      <div class="footer-img">
        <img v-if="item.isChange" :src="item.src" alt="#">
        <img v-else :src="item.srcChange" alt="#">
      </div>
      <span :class="item.isChange?'name':'name_change'">{{item.name}}</span>
      <sup :class="item.sup"></sup>
    </el-col>
  </el-row>
</div>
</template>
<script>
export default {
  data () {
    return {
      footer: [
        {
          src: '../../../static/img/home.png',
          srcChange: '../../../static/img/home_change.png',
          name: '主页',
          isChange: false,
          routerName: 'homePage',
          HeadName: '主页'
        },
        {
          src: '.../../../static/img/card.png',
          srcChange: '../../../static/img/card_change.png',
          name: '卡券',
          isChange: true,
          routerName: 'cardIndex',
          HeadName: '卡券'
        },
        {
          src: '../../../static/img/order.png',
          srcChange: '../../../static/img/order_change.png',
          name: '订单',
          sup: 'sup',
          isChange: true,
          routerName: 'orderIndex',
          HeadName: '我的订单'
        },
        {
          src: '../../../static/img/mind.png',
          srcChange: '../../../static/img/mind_change.png',
          name: '我的',
          isChange: true,
          routerName: 'myIndex',
          HeadName: '我的'
        }
      ]
    }
  },
  methods: {
    footerChange (key) {
      this.footer.forEach((val) => {
        val.isChange = true
      })
      this.footer[key].isChange = !this.footer[key].isChange
      this.$router.push({name: this.footer[key].routerName, query: {HeadName: this.footer[key].HeadName}})
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
  .footer{
    background-color: #ffffff;
    box-shadow: 2px 2px 5px #ccc;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100vw;
    @at-root .item{
      text-align: center;
      position: relative;
      @at-root .footer-img{
        width: 50px;
        height: 50px;
        margin: auto;
        img{
          width: 100%;
        }
      }
      @at-root .name{
        font-size: 24px;
        display: block;
        margin-top: -3px;
      }
      @at-root .name_change{
        font-size: 24px;
        display: block;
        margin-top: -3px;
        color: #F48551;
      }
      @at-root .sup{
        display: inline-block;
        width: 15px;
        height: 15px;
        background-color: #EC0004;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 50px;
      }
    }
  }
</style>
